import {getData, getImageNaturalSizes, getTransforms, removeClass, setStyle, toggleClass} from "./utils";

export default {
    click(event) {
        console.log('handlers', 'click')
        const {target} = event
        const action = getData(target, 'viewerAction')
        switch (action) {
            case 'mix':
                this.hide()
                break
            case 'zoom-in':
                this.zoom(0.1, true)
                break
            case 'zoom-out':
                this.zoom(-0.1, true)
                break
            case 'one-to-one':
                console.log('one-to-one');
                break
            case 'reset':
                console.log('reset');
                break
            case 'prev':
                console.log('prev');
                break
            case 'play':
                console.log('play');
                break
            case 'next':
                console.log('next');
                break
            case 'rotate-left':
                console.log('rotate-left');
                break
            case 'rotate-right':
                console.log('rotate-right');
                break
            case 'flip-horizontal':
                console.log('flip-horizontal');
                break
            case 'flip-vertical':
                console.log('flip-vertical');
                break
        }
    },
    load() {
        console.log('handlers', 'load')
        if (this.timeout) {
            clearTimeout(this.timeout)
            this.timeout = false
        }
        const {image, viewerData} = this
        removeClass(image, 'viewer-invisible')
        removeClass(this.canvas, 'viewer-loading')

        image.style.cssText = (`
          height:0;width:0;
          position:absolute;
          max-width:none!important;
          margin-left:${viewerData.width / 2}px;
          margin-top:${viewerData.height / 2}px;
        `)

        this.initImage(() => {
            toggleClass(image, 'viewer-hide', true)
            toggleClass(image, 'viewer-transition', true)

            this.renderImage(() => {
                this.viewed = true
                this.viewing = false
            })
        })
    },
    loadImage(event) {
        console.log('handlers', 'loadImage')
        const image = event.target
        const parent = image.parentNode
        const parentWidth = parent.offsetWidth || 30
        const parentHeight = parent.offsetHeight || 50
        const filled = !!getData(image, 'filled')

        getImageNaturalSizes(image, (naturalWidth, naturalHeight) => {
            const aspectRatio = naturalWidth / naturalHeight
            let width = parentWidth
            let height = parentHeight
            if (parentHeight * aspectRatio > parentWidth) {
                if (filled) {
                    width = parentHeight * aspectRatio
                } else {
                    height = parentWidth / aspectRatio
                }
            } else if (filled) {
                height = parentWidth / aspectRatio
            } else {
                width = parentHeight * aspectRatio
            }

            setStyle(image, Object.assign({width, height}, getTransforms({
                translateX: (parentWidth - width) / 2,
                translateY: (parentHeight - height) / 2
            })))
        })
    }
}
